import { Button, Mask } from "antd-mobile";
import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
// import Biao from '../../components/Biao'
import { useLocation } from "react-router-dom";
import { Cell } from "react-vant";
import { shanchu, tianjia } from "../../store/cang/cang";
import { Form, Input } from "antd-mobile";
import axios from "../../utils/index";
function Index() {
  const dispatch = useDispatch();

  const { state } = useLocation();
  console.log(state);
  const list = useSelector((state) => state.cang.cang);
  console.log(list);

  const shan = (id) => {
    dispatch(shanchu(id));
  };
  const [visible, setVisible] = useState(false);

  const tian = () => {
    setVisible(true);
  };
  const onFinish = (value) => {
    console.log(value);
    dispatch(tianjia(value));
    setVisible(false);
  };
  const [form] = Form.useForm();
  const ORC = () => {
    const input = document.createElement("input");
    input.type = "file";
    input.click();
    input.onchange = async () => {
      const file = input.files[0];
      const formData = new FormData();
      formData.append("file", file, file.name);
      const resp = await axios.post("/orc/upload/image", formData);
      console.log(resp);
      form.setFieldsValue(resp.data.data);
    };
  };
  const xiadan = async () => {
    const res = await axios.get(
      "/pay",
      {
        params: {
          title: "支付",
          id: new Date().getTime(),
          price: 234,
        },
      },
      
    );window.open(res.data.data)
  };
  return (
    <div>
      <div>
        <Cell
          title={
            <div>
              {state.start}--{state.end}
            </div>
          }
          value={
            <div style={{ color: "red" }}>
              <p>商务座{state.tick.vip}</p>
              <p>一等座{state.tick.firstTick}</p>
              <p>二等座{state.tick.secondTick}</p>
            </div>
          }
          label={
            <div>
              {state.isSeat ? "有座" : "无座"}&nbsp;
              {state.isSeat ? "有座" : "无座"}
            </div>
          }
        />
      </div>
      <div>
        <h3 onClick={() => tian()}>添加</h3>
        <Mask
          visible={visible}
          onMaskClick={() => setVisible(false)}
          opacity="thick"
        >
          <Form
            form={form}
            onFinish={onFinish}
            layout="horizontal"
            footer={
              <div>
                <Button block type="submit" color="primary" size="large">
                  提交
                </Button>
                <Button block onClick={() => ORC()}>
                  ORC
                </Button>
              </div>
            }
          >
            <Form.Item name="name" label="姓名">
              <Input />
            </Form.Item>
            <Form.Item name="code" label="身份证">
              <Input />
            </Form.Item>
          </Form>
        </Mask>
        {list.map((v) => {
          return (
            <div style={{ display: "flex" }}>
              <p>
                {v.name} {v.code}
              </p>
              <Button style={{ background: "red" }} onClick={() => shan(v.id)}>
                删除
              </Button>
            </div>
          );
        })}
        <Button onClick={() => xiadan()}>下单</Button>
      </div>
    </div>
  );
}

export default Index;
